import { useVisible } from '@/biz-components/modals/hooks';
import { xhrGet } from '@/services';
import { FormattedMessage } from '@@/plugin-locale/localeExports';
import { Button, Modal, Spin } from 'antd';
import { useEffect, useState } from 'react';
import './index.less';

const LicenseInfoButton = () => {
  const [visible, showModal, hiddenModal] = useVisible();

  const [license, setLicense] = useState<any>({});
  const [loading, setLoading] = useState<any>(false);

  const handleClick = () => {
    showModal();
  };

  const loadLicenseInfo = () => {
    setLoading(true);
    xhrGet('/sym/license/info').then((res: any) => {
      setLicense(res.result);
    }).catch((e: any) => {
      console.error(e);
      hiddenModal();
    }).finally(() => {
      setLoading(false);
    })
  }

  useEffect(() => {
    if (visible) {
      loadLicenseInfo();
    }
  }, [visible])

  return (
    <>
      <Button type="text" onClick={handleClick}>
        <FormattedMessage id="license.btn.info" />
      </Button>
      <Modal visible={visible} closable={false} onCancel={hiddenModal} footer={null} className='license-modal'>
        <Spin spinning={loading}>
          <h1 className='title whiteColor'>{license && license.info}</h1>
          <div className='notBefore whiteColor'>有效期始：{license && license.notBefore}</div>
          <div className='notBefore whiteColor'>有效期止：{license && license.notAfter}</div>
        </Spin>
      </Modal>
    </>
  );
};

export default LicenseInfoButton;
